import { toRaw } from 'vue';
import { id_split } from '../../../DataDefine/sourceData';
import {
  select_empty_border_id,
  select_empty_content_id,
  select_empty_view_selected_id,
  spacename_select_empty,
} from '../DataDefine/sourceData';
import { create_static_focusDisplay_mana } from '../../../../../components/globalComps/comps/focusDisplay';
import { normalizeContainer } from '../../../Func';
import { keyVal_node_id_prefix } from '../../keyVal_node/DataDefine/sourceData';

const select_empty_staticNodeTag = 'select_empty_staticNode';

/**
 * 浮动元素 全局管理集 目标注册
 */
let focusDisplay_spacename = create_static_focusDisplay_mana(
  spacename_select_empty
);

class select_empty_staticNode {
  get [Symbol.toStringTag]() {
    return select_empty_staticNodeTag;
  }

  constructor(props) {
    this.props = toRaw(props);

    this.select_empty_border_dom = normalizeContainer(
      this.#fill_id(select_empty_border_id)
    );

    this.select_empty_view_selected_dom = normalizeContainer(
      this.#fill_id(select_empty_view_selected_id)
    );

    this.select_empty_content_dom = normalizeContainer(
      this.#fill_id(select_empty_content_id)
    );

    this.select_empty_keyVal_node_dom = normalizeContainer(
      this.#fill_id(keyVal_node_id_prefix)
    );

    /**
     * 浮动元素 operate
     */
    let focusDisplay_op = focusDisplay_spacename.create_new_focusDisplay_dom();

    this.focusDisplay_dom = focusDisplay_op.targetEl;

    this.focusDisplay_dom_container = this.focusDisplay_dom.firstChild;
  }

  /**
   * 空 选择 的 主体
   * @type {HTMLElement}
   */
  select_empty_border_dom;

  /**
   * keyVal_node 值 存储
   * @type {HTMLInputElement}
   */
  select_empty_keyVal_node_dom;

  /**
   * 显示 栏
   * @type {HTMLElement}
   */
  select_empty_view_selected_dom;

  /**
   * 装载 栏
   * @type {HTMLElement}
   */
  select_empty_content_dom;

  /**
   * 浮动元素
   * @type {HTMLDialogElement}
   */
  focusDisplay_dom;

  /**
   * 浮动元素 挂载 元素 栏
   * @type {HTMLElement}
   */
  focusDisplay_dom_container;

  #fill_id(prefix_cla) {
    return prefix_cla + id_split + this.props.id;
  }
}

export { select_empty_staticNode };
